<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../template/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="title">
		<title>The Change | Thêm lương chi tiết mới</title>
	</ui:define>
	<ui:define name="lcontent">
		<ui:include src="/template/menu-left/human-resources.xhtml"></ui:include>
	</ui:define>
	<ui:define name="rcontent">
		<h:form id="form">
			<f:event type="preRenderView" listener="#{salaryStructure.onloadNew}"/>
			<span class="rtitle">Thêm lương chi tiết mới</span>
			<hr />
			<a class="button-link white-bt" href="#{facesContext.externalContext.requestContextPath}/human-resources/salary-structure.html">
				<img src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/left.png" alt="" />
				<span>Quay lại</span>
			</a>
			<h:commandLink styleClass="button-link green-bt load" action="#{salaryStructure.insert}">
	            Lưu lại
	        </h:commandLink>			
			<span class="clear"></span>
			<br />
			<div class="input-panel">
				<span class="input-title">Thông tin chi tiết</span>
				<table class="input-column w100">
					<tr>
						<td class="w50">
							<div class="input-item">
								<span class="italic block">Tên </span>
								<h:outputText styleClass="item-output" value="#{salaryStructure.salaryStructure.employee.lastname} #{salaryStructure.salaryStructure.employee.firstname} "></h:outputText>
							</div>
							<div class="input-item">
								<span class="italic block">Phòng ban</span>
								<h:outputText styleClass="item-output" value="#{salaryStructure.salaryStructure.employee.department.name}"></h:outputText>
							</div>
							<div class="input-item">
								<span class="italic block">Chức vụ</span>
								<h:outputText styleClass="item-output" value="#{salaryStructure.salaryStructure.employee.designation.name}"></h:outputText>
							</div>
							<div class="input-item">
								<span class="italic block">Giới tính</span>
								<h:outputText styleClass="item-output"  value="Nam" rendered="#{salaryStructure.salaryStructure.employee.gender eq 1}"></h:outputText>
								<h:outputText styleClass="item-output"  value="Nữ" rendered="#{salaryStructure.salaryStructure.employee.gender eq 2}"></h:outputText>
							</div>
							<div class="input-item">
								<span class="italic block">Số điện thoại</span>
								<h:outputText styleClass="item-output"  value="#{salaryStructure.salaryStructure.employee.cellphone}"></h:outputText>
							</div>
							<div class="input-item">
								<span class="italic block">Email</span>
								<h:outputText styleClass="item-output"  value="#{salaryStructure.salaryStructure.employee.email}"></h:outputText>
							</div>
						</td>
						<td class="w50">														
							<div class="input-item">
								<span class="block required">Lương căn bản <img align="top"
									src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" />
								</span>
								<h:inputText value="#{salaryStructure.salaryStructure.basic_salary}" required="true"
									requiredMessage="Lương căn bản không được để trống" styleClass="w80 input">
									<f:convertNumber pattern="#,###.#"></f:convertNumber>
								</h:inputText>
							</div>			
							<div class="input-item">
								<span class="block">Phụ cấp</span>
								<h:inputText value="#{salaryStructure.salaryStructure.total_earning}" styleClass="w80 input">
									<f:convertNumber pattern="#,###.#"></f:convertNumber>
								</h:inputText>
							</div>				
							<div class="input-item">
								<span class="block">Khẩu trừ</span>
								<h:inputText value="#{salaryStructure.salaryStructure.total_deduction}" styleClass="w80 input">
									<f:convertNumber pattern="#,###.#"></f:convertNumber>
								</h:inputText>
							</div>								
						</td>
					</tr>
				</table>
			</div>
			
			<span class="input-title">Phụ cấp</span>
				<h:panelGroup id="earningPanel">
					<table class="table-list w100 align-center">
					<tr>
						<th class="w30 table-header">Tên</th>
						<th class="w50 table-header">Mô tả</th>
						<th class="w20 table-header">Số tiền</th>
					</tr>
					<ui:repeat var="var" value="#{salaryStructure.listEarning}" varStatus="varStatus">
						<h:panelGroup rendered="#{varStatus.index%2 eq 0}">						
							<tr class="row-white">
								<td>
									<h:inputText styleClass="w100 input-noborder bold align-center" value="#{var.name}"></h:inputText>
								</td>
								<td>
									<h:inputText styleClass="w100 input-noborder align-center" value="#{var.description}"></h:inputText>
								</td>
								<td>
									<h:inputText styleClass="w100 input-noborder bold align-center" value="#{var.money}"></h:inputText>	
								</td>													
							</tr>			
						</h:panelGroup>
						<h:panelGroup rendered="#{varStatus.index%2 ne 0}">	
							<tr class="row-gray">	
								<td>
									<h:inputText styleClass="w100 input-noborder bold align-center" value="#{var.name}"></h:inputText>
								</td>
								<td>
									<h:inputText styleClass="w100 input-noborder align-center" value="#{var.description}"></h:inputText>
								</td>
								<td>
									<h:inputText styleClass="w100 input-noborder bold align-center" value="#{var.money}"></h:inputText>	
								</td>							
							</tr>					
						</h:panelGroup>							
					</ui:repeat>
						<tr>
							<td colspan="2"  class="p10 bold"><span>Tổng cộng</span></td>
							<td><span class="total-money">12.200.000</span></td>
						</tr>
					</table>
				</h:panelGroup>
					        
	        <span class="input-title">Khẩu trừ</span>
				<h:panelGroup id="deductionPanel">
					<table class="table-list w100 align-center">
					<tr>
						<th class="w30 table-header">Tên</th>
						<th class="w50 table-header">Mô tả</th>
						<th class="w20 table-header">Số tiền</th>
					</tr>
					<ui:repeat var="var" value="#{salaryStructure.listDeduction}" varStatus="varStatus">
						<h:panelGroup rendered="#{varStatus.index%2 eq 0}">						
							<tr class="row-white">
								<td>
									<h:inputText styleClass="w100 input-noborder bold align-center" value="#{var.name}"></h:inputText>
								</td>
								<td>
									<h:inputText styleClass="w100 input-noborder align-center" value="#{var.description}"></h:inputText>
								</td>
								<td>
									<h:inputText styleClass="w100 input-noborder bold align-center" value="#{var.money}"></h:inputText>	
								</td>													
							</tr>			
						</h:panelGroup>
						<h:panelGroup rendered="#{varStatus.index%2 ne 0}">	
							<tr class="row-gray">	
								<td>
									<h:inputText styleClass="w100 input-noborder bold align-center" value="#{var.name}"></h:inputText>
								</td>
								<td>
									<h:inputText styleClass="w100 input-noborder align-center" value="#{var.description}"></h:inputText>
								</td>
								<td>
									<h:inputText styleClass="w100 input-noborder bold align-center" value="#{var.money}"></h:inputText>	
								</td>							
							</tr>					
						</h:panelGroup>							
					</ui:repeat>
						<tr>
							<td colspan="2"  class="p10 bold"><span>Tổng cộng</span></td>
							<td><span class="total-money">12.200.000</span></td>
						</tr>
					</table>
				</h:panelGroup>
				<hr/>
				<h:commandLink styleClass="button-link green-bt load" action="#{salaryStructure.insert}">
		            Lưu lại
		        </h:commandLink>		
	        <span class="clear"></span>	        
		</h:form>			
	</ui:define>
</ui:composition>